<template>
  <div>
    <a-button
      type="primary"
      style="margin-bottom: 10px"
      @click="onSubmit"
      v-if="isEdit"
      >上传</a-button
    >
    <a-button type="primary" @click="onCheck" v-if="!isEdit">查看</a-button>
  </div>
  <a-modal
    :width="900"
    v-model:visible="visibleOfSubmit"
    @cancel="onSubmitCancel"
    @ok="onSubmitOk"
    title="上传图片"
    :bodyStyle="bodyStyle"
  >
    <a-upload
      :file-list="fileList"
      :remove="handleRemove"
      :before-upload="beforeUpload"
      :multiple="true"
    >
      <a-button>
        <upload-outlined></upload-outlined>
        点击上传
      </a-button>
    </a-upload>
  </a-modal>
  <a-modal
    v-model:visible="visibleOfCheck"
    :width="900"
    :bodyStyle="bodyStyle"
    title="查看图片"
  >
    <div>
      <div v-for="(item, index) in imgArr" :key="index">
        <div style="margin-bottom: 24px">{{ item.date }}</div>
        <a-image-preview-group>
          <span
            v-for="(item, index) in item.photo"
            :key="index"
            style="margin-right: 12px"
          >
            <a-image :width="200" :src="'data:image/png;base64,' + item" />
          </span>
        </a-image-preview-group>
      </div>
    </div>

    <template #footer>
      <a-button type="primary" @click="onCheckOk">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, defineProps, watch } from "vue";
import { message } from "ant-design-vue";
import { useStore } from "vuex";
import { reportMultifileUpload } from "@/api/module/constructAndImplement";
import { cloneDeep } from "lodash";
import global from "../../../global/global.vue";

const props = defineProps({
  isEdit: Boolean,
  isGetData: Boolean,
  index: String,
});

// 项目id
const projectId = global.xmid;
const store = useStore();
// 点击查看查看的照片
const imgArr = ref("");
const bodyStyle = {
  width: "900px",
  height: "600px",
  overflowY: "auto",
};

watch(
  () => props.isGetData,
  (newV, oldV) => {
    // 查看数据获取
    imgArr.value =
      store.state.progressFilling.editProgressFillingData[
        props.index
      ].photoDataVo;
  }
);

const visibleOfCheck = ref(false);
const visibleOfSubmit = ref(false);

const fileList = ref([]);
const handleRemove = (file) => {
  const index = fileList.value.indexOf(file);
  const newFileList = fileList.value.slice();
  newFileList.splice(index, 1);
  fileList.value = newFileList;
};
const beforeUpload = (file) => {
  // 判断文件类型
  const imageType = ["image/jpeg", "image/png", "image/gif", "image/bmp"];
  const isType = imageType.includes(file.type);
  if (!isType) {
    return message.warn("请检查类型！");
  }
  fileList.value = [...fileList.value, file];
  return false;
};

// 点击上传
const onSubmit = () => [(visibleOfSubmit.value = true)];

// 点击查看
const onCheck = () => {
  visibleOfCheck.value = true;
};

// 点击上传确认
// 上传文件，同时保存数据到vuex，弹窗关闭后再打开还有上传列表
const fileId = ref([]);
const onSubmitOk = async () => {
  console.log(fileList.value);
  // 上传接口
  const formData = new FormData();
  fileList.value.forEach((item) => {
    formData.append("files", item);
  });
  const res = await reportMultifileUpload(formData);
  fileId.value = res.data.join(",");
  console.log(fileId.value);
  // 改变提交参数数据
  const paramsData = cloneDeep(store.state.progressFilling.paramsData);

  const index = paramsData.findIndex(
    (item) =>
      item.zbId ===
      store.state.progressFilling.editProgressFillingData[props.index].zbId
  );
  if (index === -1) {
    //  1.1 该行数据首次编辑，创建新数据
    paramsData.push({
      zbId: store.state.progressFilling.editProgressFillingData[props.index]
        .zbId,
      tbId: store.state.progressFilling.editProgressFillingData[props.index]
        .tbId,
      photoId: fileId.value,
      xmmc: store.state.progressFilling.editProgressFillingData[props.index]
        .xmmc,
      content:
        store.state.progressFilling.editProgressFillingData[props.index]
          .content,
      gcldw:
        store.state.progressFilling.editProgressFillingData[props.index].gcldw,
      tze: store.state.progressFilling.editProgressFillingData[props.index].tze,
      xmId: projectId,
    });
    console.log(paramsData);
    store.commit("progressFilling/initParamsData", paramsData);
  } else {
    // 1.2 该行数据不是首次被编辑，修改原来数据
    paramsData[index].photoId = fileId.value;
    store.commit("progressFilling/initParamsData", paramsData);
  }
  console.log(store.state.progressFilling.paramsData);
  // visibleOfSubmit.value = false;
};
// 点击查看确认
const onCheckOk = () => {
  visibleOfCheck.value = false;
};

// 点击上传取消
const onSubmitCancel = () => {
  // 清空fileList
  fileList.value = [];
  visibleOfSubmit.value = false;
};
</script>

<style lang="less" scoped></style>
